<template>
  <!--今日必拼和热拼榜-->
    <div class="spellAndHeatspell">
      <div class="middle">
        <!--毕拼-->
        <div class="middle_top">
          <todayLbt></todayLbt>
        </div>
        <!--热拼-->
        <div class="middle_bottom">
          <div class="title"> 热拼榜</div>
          <!--实物-->
          <div class="inKind">
            <div class="SpellList" @click="hotspell"
                 v-for="(item,key) in this.SpellList_"
                 :key = 'key'>
              <div class="symbol">榜单</div>
              <img v-lazy="item.img" alt="">
              <div class="class">{{item.title}}榜</div>
              <p><span>{{item.float}}</span>万+人次购买</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import todayLbt from '../todaylbt/todaylbt'
    export default {
        name: "PurcLbt",
      data(){
        return{
          SpellList_:[]
        }
      },
      components:{
         todayLbt
      },
      methods:{
        hotspell(){
          this.$router.push({path:'/index/HotSpell/hotspell'})
        },
        getUser () {
          this.$http.get('/user')
            .then((res) => {
              this.SpellList_ = res.data.list;
              // = res.data.list;
            })
            .catch((err) =>{
              console.log(err);
            });
        }
      },
      // 运算
      comments:{

      },
      created() {
        this.getUser ()
      }
    }
</script>

<style scoped lang="scss">

.spellAndHeatspell{
  width: 100vw;
  margin-top: 80px;
  overflow: hidden;
.middle{
  margin: auto;
  width: 1170px;
  height: 1160px;
  border-radius: 40px;
  box-sizing: border-box;
  background: white;
  .middle_top{
    width: 100%;
    height: 587px;
  }
  .middle_bottom{
    border-top:solid 2px #f2f2f2;
    width: 100%;
    height: 574px;
    padding: 30px;
    box-sizing: border-box;
    .title{
      font-size: 50px;
      text-indent: 1.5em;
      font-weight: bold;
      background: url("../../../assets/ranking.png") no-repeat 10px center;
      background-size: 50px 50px;
    }
    .inKind{
      display: flex;
      .SpellList{
        flex: 1;
        margin: 20px 10px;
        width: 355px;
        height: 440px;
        border-radius: 20px;
        border: solid 5px #fbced3;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
       position: relative;
        .symbol{
          position: absolute;
          top:0;
          width: 85px;
          line-height: 55px;
          left: 27px;
          background: url("../../../assets/bangdan.png") no-repeat 100% 100%;
          background-size: 100% 100%;
          z-index: 999;
          font-size: 35px;
          text-align: center;
          color: #fff;
        }
        img{
          width: 264px;
          height: 264px;
          object-fit: contain;
          margin: 10px;
          border-radius: 30px;
          z-index: 1;
        }
        .class{
          font-size: 38px;
          background: #fbced3;
          border-radius: 40px;
          color: #eb5346;
          width: 265px;
          height: 70px;
          line-height: 70px;
          text-align: center;
        }
        p{
          height: 80px;
          line-height: 80px;
          margin: 0;
          color: #818181;
          font-size: 28px;
        }
      }
    }
  }
}
}
</style>
